<template>
  <div class="excel">
    <el-alert
        title="只允许上传.xlsx和.csv文件, 最大只能上传100Mb的文件, 如果上传成功会显示已上传的文件"
        type="warning"
        center
        show-icon>
    </el-alert>
    <el-upload
        class="upload-demo"
        :limit="2"
        drag
        accept=".xlsx,.csv"
        :on-success="success"
        :on-exceed="handleExceed"
        :on-error="error"
        :on-progress="progress"
        :before-upload="uploadBefore"
        :before-remove="beforeRemove"
        action="http://localhost:8881/uploadFile"
        id="upload">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div id="progress">
      <el-progress :text-inside="true" :stroke-width="20" :percentage=percentage status="success"></el-progress>
    </div>
  </div>
</template>

<script>
  export default {
    name: "excel",
    data(){
      return {
        percentage: 0
      }
    },
    methods:{
      handleExceed(files, fileList) {
        this.$message.error(`只能上传1个文件，如果要重新上传文件请先删除已上传的文件`);
      },
      error(){
        this.$message.error('上传失败,请打开后台服务')
        this.percentage=0
        this.$store.commit("setNext",0)
      },
      uploadBefore(file){
        const strRegex = "(.xlsx|.csv)$"; //用于验证图片扩展名的正则表达式
        const re= new RegExp(strRegex);
        if(re.test(file.name)){
          return true
        }else{
          this.$message.error(`${file.name}格式不对，请上传.xlsx和.csv文件`)
          return false
        }
      },
      beforeRemove(file, fileList) {
        this.$store.commit("setNext",0)
        this.$store.commit("setExcel",0)
        this.percentage=0
      },
      progress(event, file, fileList){
        this.percentage=event.percent
        console.log(this.$store.state.excel)
      },
      success(){
        this.$store.commit("setNext",this.percentage)
        this.$store.commit("setExcel",1)
        console.log(this.$store.state.excel)
      }
    }
  }
</script>

<style scoped>
  .excel{
    font-weight: bold;
  }
  #upload{
    width: 24%;
    padding-left: 38%;
    margin-top: 3rem;
    margin-bottom: 1rem;
  }
  #progress{
    margin-left: 38%;
    width: 24%;
  }
</style>